<script setup lang="ts">
	import { miniProgramBarWidth, safeAreaInsetsTop } from '../../utils/system';
	const data = [
		{
			avatar: "img1.png",
			name: "香菜不加辣y",
			desc: "7天前发了笔记"
		},
		{
			avatar: "img2.png",
			name: "Lxll",
			desc: "前天发了笔记"
		},
		{
			avatar: "img3.png",
			name: "加一",
			desc: "11天前发了笔记"
		}
	]
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
</script>
<template>
	<view class="main-message-container">
		<!-- #ifdef WEB || APP -->
		<view class="header">
			<view style="color: transparent;">{{t('messages.moreGroups')}}</view>
			<text>{{t('tabs.messages')}}</text>
			<view class="find-chat">
				<i class="iconfont icon-qunliao"></i>
				<text>{{t('messages.moreGroups')}}</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="header" :style="{width: `${miniProgramBarWidth}px`}">
			<text>{{t('tabs.messages')}}</text>
			<view class="find-chat">
				<i class="iconfont icon-qunliao"></i>
				<text>{{t('messages.moreGroups')}}</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<view class="header">
			<text>{{t('tabs.messages')}}</text>
			<view class="find-chat">
				<i class="iconfont icon-qunliao"></i>
				<text>{{t('messages.moreGroups')}}</text>
			</view>
		</view>
		<!-- #endif -->
		<view class="banner">
			<view class="part flex-center">
				<view class="favor logo">
					<i class="iconfont icon-31guanzhu1xuanzhong"></i>
				</view>
				<text>{{t('messages.likesCollect')}}</text>
			</view>
			<view class="part flex-center">
				<view class="focus logo">
					<i class="iconfont icon-geren"></i>
				</view>
				<text>{{t('messages.newFollowers')}}</text>
			</view>
			<view class="part flex-center">
				<view class="remark logo">
					<i class="iconfont icon-pinglun"></i>
				</view>
				<text>{{t('messages.comments')}}</text>
			</view>
		</view>
		<view class="no-message">{{t('messages.noMessages')}}</view>
		<view class="find-friends">
			<text>{{t('messages.discoverFriends')}}</text>
			<view v-for="item in data" :key="item.name" class="new-friend">
				<view class="left-part">
					<image class="avatar" :src="`/static/${item.avatar}`" mode="aspectFill"></image>
					<view class="part">
						<text class="name">{{item.name}}</text>
						<text class="desc">{{item.desc}}</text>
					</view>
				</view>
				<view class="favor-button">{{t('messages.follow')}}</view>
			</view>
			<uni-icons type="closeempty" size="13" color="#898989" class="close"></uni-icons>
			<view class="find-more-container">
				{{t('messages.findMore')}}<uni-icons type="right" size="13" color="#898989"></uni-icons>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	@import "@/static/font/iconfont.css";

	.main-message-container {
		flex: 1;

		.header {
			padding: 20rpx;
			font-size: $font-size-28;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.find-chat {
				display: flex;
				flex-direction: row;
				align-items: center;

				.icon-qunliao {
					font-size: 25rpx;
				}

				text {
					margin-left: 10rpx;
					font-size: $font-size-24;
				}
			}
		}

		.banner {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			margin-top: 50rpx;

			.logo {
				display: inline-block;
				border-radius: 23rpx;
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}

			.part {
				text {
					font-size: $font-size-20;
					margin-top: 15rpx;
				}

				.favor {
					background-color: #fceeeb;

					.icon-31guanzhu1xuanzhong {
						font-size: 50rpx;
						color: #ea6962;
					}
				}

				.focus {
					background-color: #e9effd;

					.icon-geren {
						font-size: 50rpx;
						color: #4d85f5;
					}
				}

				.remark {
					background-color: #e8faf3;

					.icon-pinglun {
						font-size: 50rpx;
						color: #6ed99e;
					}
				}
			}
		}

		.no-message {
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: $font-size-20;
			color: #939393;
		}

		.find-friends {
			font-size: $font-size-20;
			background-color: #fafafa;
			padding: 30rpx 50rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			position: relative;

			.find-more-container {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #939393;
				font-size: $font-size-20;
				margin-top: 10rpx;
			}

			.close {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
			}

			.new-friend {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 20rpx 0;
				justify-content: space-between;

				.left-part {
					display: flex;
					flex-direction: row;
					align-items: center;

					.avatar {
						width: 70rpx;
						height: 70rpx;
						border-radius: 100%;
					}

					.part {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						font-size: $font-size-20;
						margin-left: 15rpx;

						.name {
							color: black;
						}

						.desc {
							color: #939393;
							margin-top: 5rpx;
						}
					}
				}

				.favor-button {
					padding: 5rpx 30rpx;
					border: 1rpx solid #e73e42;
					border-radius: 20rpx;
					color: #e73e42;
				}
			}
		}
	}
</style>